<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2019/4/30
  Time: 10:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="../common.jsp"%>
<html>
<head>
    <title>Title</title>
</head>
<body>

<table id="roleGrid" class="easyui-datagrid" title="角色列表" style="width:600px;height:250px" toolbar="#tb">
    <thead>
    <tr>
        <th field="roleId" width="10" hidden="true">roleId</th>
        <th field="roleName" width="100">角色名称</th>
        <th field="roleCode" width="100" align="right">角色代码</th>
        <th field="status" width="100" align="right">状态</th>
    </tr>
    </thead>
</table>
<div id="tb">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addRole()">新增</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editRole()">修改</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="delRole()">删除</a>
</div>
<div id="role_edit" class="easyui-dialog" title="添加角色" data-options="iconCls:'icon-save'" style="border: 0; width: 500px;">
    <form id="mainForm" method="post">
        <input name="roleId" type="hidden">
        <table cellpadding="5">
            <tr>
                <td>归属机构:</td>
                <td><input class="easyui-textbox" type="text" name="roleDept" data-options="required:true"></input></td>
            </tr>
            <tr>
                <td>角色名称:</td>
                <td><input class="easyui-textbox" type="text" name="roleName" data-options="required:true"></input></td>
            </tr>
            <tr>
                <td>角色代码:</td>
                <td><input class="easyui-textbox" type="text" name="roleCode" data-options="required:true"></input></td>
            </tr>
            <tr>
                <td>分配权限:</td>
                <td><input name="menuIds" id="menuIds" class="easyui-combotree" style="width: 155px;"></td>
            </tr>
            <tr>
                <td>状态:</td>
                <td>
                    <input class="easyui-radio" type="radio" name="status"  value="1"  checked="checked"/>启用
                    <input class="easyui-radio" type="radio" name="status" value="0"/>禁用
                </td>
            </tr>
        </table>
    </form>
    <div style="text-align: center; padding: 5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm('add')" id="addSub">添加提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm('update')" id="editSub">编辑提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="closeForm()">取消</a>
    </div>

</div>
<script type="application/javascript">
    $(function () {
        $('#role_edit').dialog('close');
       $("#roleGrid").datagrid({
           url:ctx+"/role/getSysRoleByPage",
           pagination:true,
           pageSize:20,
           pageList:[20,50,100],
           singleSelect:true,
           rownumbers:true,
           onBeforeLoad : function(param) {
               $.messager.progress({
                   text : '数据加载中....'
               });
           },
           onLoadSuccess : function(data) {
               $.messager.progress('close');
           },
           onLoadError : function() {
               $.messager.progress('close');
           }
       });

       //加载菜单栏选项
        $('#menuIds').combotree({
            url : ctx+'/home/getMenuTree',
            multiple : true,
            method : 'GET',
            cascadeCheck : false,
            onChange : function(newVal, oldVal) {
                var newString = newVal.toString();
                var oldString = oldVal.toString();
                var tree = $('#menuIds').combotree('tree');
                // 节点被勾选时, 自动勾选父节点
                if (newVal.length > oldVal.length) {
                    for (var i = 0; i < newVal.length; i++) {
                        // 新增的节点
                        if (oldString.indexOf(newVal[i]) <= -1) {
                            // 获得当前被操作的节点
                            var item = tree.tree('find', newVal[i]);
                            // alert(item.text);
                            var parent = item;
                            while (parent != null) {
                                var parent = tree.tree('getParent', parent.target);
                                if (parent != null) {
                                    tree.tree('check', parent.target);
                                }
                            }
                        }
                    }
                }
                // 节点取消勾选时, 自动取消子节点
                else if (newVal.length < oldVal.length) {
                    for (var i = 0; i < oldVal.length; i++) {
                        if (newString.indexOf(oldVal[i]) <= -1) {
                            // 获得当前被操作的节点
                            var item = tree.tree('find', oldVal[i]);
                            var children = tree.tree('getChildren', item.target);
                            if (children.length != 0) {
                                for (var i = 0; i < children.length; i++) {
                                    tree.tree('uncheck', children[i].target);
                                }
                            }
                        }
                    }
                } else {

                }
            }
        });
    });

   function addRole(){
      $("#role_edit").dialog("open");
      $("#mainForm").form("clear");
      $("#addSub").show();
      $("#editSub").hide();
   }

   function editRole(){
     var row = $("#roleGrid").datagrid("getSelected");
     if(row){
         $('#role_edit').dialog('open');
         $('#addSub').hide();
         $('#editSub').show();
         // 加载到form表单中
         $('#mainForm').form('load', {
             roleId : row.roleId,
             roleName : row.roleName,
             roleDept : row.roleDept,
             roleCode : row.roleCode,
             status : row.status
         });
     }else{
         $.messager.alert("操作提示", "请先选中一行！", "error");
     }
   }

   function delRole(){
       var row = $("#roleGrid").datagrid("getSelected");
       if(row){
           $.ajax({
               url : ctx+'/role/delRoleById',
               dataType : "json",
               data : {
                   roleId : row.roleId
               },
               type : "GET",
               contentType : "application/json;charset=utf-8",
               success : function(data) {
                   if (data.success == true) {
                       // 重新加载
                       $('#roleGrid').datagrid('reload');
                       $.messager.confirm("操作提示",data.respMsg,"info");
                   } else {
                       $.messager.alert("操作提示", data.respMsg, "error");
                   }
               },
               error : function() {
                   $.messager.alert("操作提示", "操作失败！", "error");
               }
           });
       }else{
           $.messager.alert("操作提示", "请先选中一行！", "error");
       }
   }

   function submitForm(data){
       var url;
       if(data=="add"){
         url=ctx+"/role/addRole";
       }else{
        url=ctx+"/role/updateRole";
       }
       if ($('#mainForm').form('validate')) {
           var formJson = $('#mainForm').find('input').not('[value=""]').serializeJSON();
           // alert(JSON.stringify(formJson))
           var menuIds = $("#menuIds").combotree("getValues");
           formJson.menuIds = menuIds;
           $.ajax({
               url : url,
               dataType : "json",
               data : JSON.stringify(formJson),
               type : "POST",
               contentType : "application/json;charset=utf-8",
               success : function(data) {
                   if (data.status == true) {
                       $('#role_edit').dialog('close');
                       // 重新加载
                       $('#roleGrid').datagrid('reload');
                       $.messager.alert("操作提示",data.respMsg,"info");
                   } else {
                       $.messager.alert("操作提示", data.respMsg, "error");
                   }
               },
               error : function() {
                   $.messager.alert("操作提示", "操作失败！", "error");
               }
           });
       } else {

       }
   }

   function closeForm(){
       $('#mainForm').form('clear');
       $('#roleGrid').dialog('close');
   }

</script>
</body>
</html>
